<template>
  <div class="stars" :title="String(value)">
    <span v-for="i in 5" :key="i" class="star" :class="{ filled: i <= Math.floor(value), half: showHalf && i === Math.ceil(value) && !Number.isInteger(value) }">★</span>
    <span v-if="showText" class="text">{{ value.toFixed(1) }}</span>
  </div>
  
</template>

<script setup lang="ts">
defineProps<{ value: number; showText?: boolean; showHalf?: boolean }>()
</script>

<style scoped>
.stars { display: inline-flex; align-items: center; gap: 6px; }
.star { color: #e2e8f0; font-size: 14px; line-height: 1; }
.star.filled { color: #f5a524; }
.star.half { background: linear-gradient(90deg, #f5a524 50%, #e2e8f0 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.text { color: #64748b; font-size: 12px; font-weight: 600; }
</style>


